<template>
  <div class="mian">
    <div class="nav"></div>
    <div class="palne">
      <div class="t_b">发布信息</div>
      <div class="from_palne">
        <el-form
          ref="formRules"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="选择分类" prop="lxCode">
            <el-select
              @change="changelxCode"
              v-model="form.lxCode"
              style="width: 300px"
            >
              <el-option
                v-for="val in lxCodeTags"
                :value="val.lxCode"
                :label="val.lx"
                :key="val.lx"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="招标方式" prop="zbfs">
            <el-select v-model="form.zbfs" style="width: 300px">
              <el-option
                :label="item"
                :value="item"
                v-for="item in [
                  '公开招标',
                  '邀请招标',
                  '询价',
                  '单一来源采购',
                  '竞争性谈判',
                  '磋商',
                ]"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目类型" prop="zl">
            <el-select v-model="form.zl" style="width: 300px">
              <el-option
                :label="item"
                :value="item"
                v-for="item in ['工程', '货物', '服务']"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="bt">
            <el-input
              v-model="form.bt"
              style="width: 300px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="fbt" label="副标题">
            <el-input
              placeholder="请输入"
              v-model="form.fbt"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="nr">
            <el-input
              type="textarea"
              rows="4"
              v-model="form.nr"
              style="width: 300px"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="fm">
            <el-upload
              class="avatar-uploader"
              action="/"
              :show-file-list="false"
              :on-change="changeUpload"
              :auto-upload="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="发布费用">
            <span class="num">￥{{ formatCurrency(form.je) }}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-radio-group v-model="form.zflx">
              <el-radio :label="1">余额支付</el-radio>
              <el-radio :label="2">支付宝支付</el-radio>
              <el-radio :label="3">微信支付</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="扫码支付" v-if="form.zflx != 1">
            <div v-if="form.zflx == 2">支付宝支付</div>
            <div v-if="form.zflx == 3">微信支付</div>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :loading="loading"
              >立即创建</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { splitDate, formatCurrency } from "../../utils/index.js";
export default {
  data() {
    return {
      lxCodeTags: [],
      form: {
        lxCode: "",
        zbfs: "",
        bt: "",
        nr: "",
        fm: "",
        je: 0,
        /**1余额支付 2支付宝支付 3微信支付*/
        zflx: 1,
        fbt: "",
        zl: "",
      },
      rules: {
        lxCode: [
          { required: true, message: "请选择发布类型", trigger: "change" },
        ],
        zbfs: [{ required: true, message: "请输入招标方式", trigger: "blur" }],
        bt: [{ required: true, message: "请输入标题", trigger: "blur" }],
        fbt: [{ required: true, message: "请输入副标题", trigger: "blur" }],
        nr: [{ required: true, message: "请输入内容", trigger: "blur" }],
        fm: [{ required: true, message: "请上传封面", trigger: "blur" }],
        zl: [{ required: true, message: "请选择项目类别", trigger: "blur" }],
      },
      imageUrl: "",
      loading: false,
    };
  },
  created() {
    this.$api.getHomeAPI({}).then((item) => {
      this.lxCodeTags = item.data["招标动态"];
    });
  },
  methods: {
    changelxCode(val) {
      this.$api.userPriceAPI({ lxCode: val }).then((res) => {
        this.$set(this.form, "je", res.data);
      });
    },
    changeUpload(file) {
      this.$api.uploadFile({ file: file.raw }).then((res) => {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.$set(this.form, "fm", res.data.yldz);
      });
    },
    formatCurrency(val) {
      return formatCurrency(val);
    },
    onSubmit() {
      this.$refs.formRules.validate((valid) => {
        if (valid) {
          let { form } = this;
          let lx = form.zflx;
          this.loading = true;
          if (lx == 1) {
            this.$api.releasePayAPI({ ...form, type: 1 }).then((res) => {
               this.loading = false;
              if (res.code == 200) {
                this.$message.success("发布成功");
                setTimeout(() => {
                  this.$router.push({ path: "/personal" });
                }, 500);
              }
            });
            return;
          }
          /**支付宝支付 */
          this.$api
            .userReleaseCodeAPI({
              ...form,
              je: form.je,
              subject: "西部招标采购平台",
              cgzl: form.zbfs,
              type: 1,
            })
            .then((res) => {
              let { noticeId, html } = res.data;
              this.$set(this.form, "noticeId", noticeId);
              this.loading = false;
              let routerData = this.$router.resolve({
                path: "/applay",
                query: { htmls: html },
              });
              window.open(routerData.href, "_blank");
            });
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
.mian {
  background-color: #f1f4f6;
}
.palne {
  margin: 0 auto;
  width: 1020px;
  margin-top: -122px;
  background-color: white;
}
.palne .t_b {
  height: 122px;
  line-height: 122px;
  background: #f1f4f6;
  text-align: center;
  font-weight: 700;
  font-size: 26px;
}
.from_palne {
  margin-top: 41px;
  display: flex;
  justify-content: center;
}
.num {
  font-size: 14px;

  font-weight: 700;

  color: #ff9d47;
}
.nav {
  background-image: url("~/static/img/fb_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;
}
</style>